<template>
	<view class="mains">
		<u-popup :show="showLoginPop" mode="bottom" :round="10" @close="close">
			<mploginpopup></mploginpopup>
		</u-popup>
		<view class="heads">
			<view class="headmsg uniFlex" v-if="user.avatar" @click="showLoginPop=true">
				<image :src="user.avatar" mode=""></image>
				<view>{{user.nickname}}</view>
			</view>
			<view class="headmsg uniFlex" v-else @click="goLogin">
				<image src="@/static/mains/head.png" mode=""></image>
				<view>前往登录</view>
			</view>
		</view>
		
		<view class="contents">
			<view class="orders">
				<view class="title">我的订单</view>
				<view class="uniBtn">
					<view class="odlBox" @click="myorder('pay')">
						<image src="../../static/mains/m1.png" mode=""></image>
						<view>待付款</view>
						<view class="odlNum" v-if="user.wait_pay">{{user.wait_pay}}</view>
					</view>
					<view class="odlBox" @click="myorder('finish')">
						<image src="../../static/mains/m2.png" mode=""></image>
						<view>已完成</view>
					</view>
					<view class="odlBox" @click="myorder('close')">
						<image src="../../static/mains/m3.png" mode=""></image>
						<view>已关闭</view>
					</view>
					<view class="odlBox" @click="myorder('all')">
						<image src="../../static/mains/m4.png" mode=""></image>
						<view>全部</view>
					</view>
				</view>
			</view>
			<view class="boxes">
				<view class="uniFlex">
					<view class="box" @click="collect">
						<image src="../../static/mains/m5.png" mode=""></image>
						<view>收藏</view>
					</view>
					<view class="box" @click="downloads" v-if="download">
						<image src="../../static/mains/m6.png" mode=""></image>
						<view>视频下载</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mploginpopup from '@/components/mplogin-popup/mplogin-popup.vue';
	import {
		getCode
	} from "@/utils/login";
	export default {
		components: {
			mploginpopup
		},
		data() {
			return {
				showLoginPop: false,
				
				user:{
					avatar:'',
					nickname:''
				},
				download:0,
			}
		},
		onLoad() {
			this.download=uni.getStorageSync('download');
		},
		methods: {
			// 关闭
			close(){
				this.showLoginPop = false;
			},
			async getData() {
				console.log('我的')
				if(uni.getStorageSync("token")){
					this.getMsg()
				}
			},
			// 获取个人信息
			async getMsg(){
				let res = await this.$api.getinfo();
				if(res.code == 1){
					// console.log(res)
					this.user = res.data;
					uni.setStorageSync('userid',res.data.id)
				}
			},
			// 登录
			Login() {
				uni.showModal({
					title: '温馨提示',
					content: '您还未登录，请登录后操作！',
					cancelColor: '#B3B3B3',
					confirmText: '去登录',
					confirmColor: '#E2867E',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						} else if (res.cancel) {
			
						}
					}
				});
			},
			// 前往登录
			goLogin(){
				uni.navigateTo({
					url:'/pages/login/login2'
				})
			},
			// 订单
			myorder(type){
				if(!uni.getStorageSync("token")){
					this.Login()
					return
				}
				uni.navigateTo({
					url:'/pages/mains/order/order?type='+type
				})
			},
			// 收藏
			collect(){
				if(!uni.getStorageSync("token")){
					this.Login()
					return
				}
				uni.navigateTo({
					url:'/pages/mains/collect/collect'
				})
			},
			// 下载
			downloads(){
				if(!uni.getStorageSync("token")){
					this.Login()
					return
				}
				uni.navigateTo({
					url:'/pages/mains/downloads/downloads'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.mains {
		.heads{
			position: absolute;
			z-index: 1;
			top: 0;
			right: 0;
			background: url('https://s1.ax1x.com/2023/09/12/pPgc1IS.png') no-repeat;
			background-size: 100% 100%;
			width: 100%;
			height: 380rpx;
			
			.headmsg{
				padding: 100rpx 60rpx;
				font-size: 32rpx;
				font-weight: 500;
				
				image{
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-right: 33rpx;
				}
			}
		}
		.contents{
			position: absolute;
			top: 260rpx;
			left: 0;
			right: 0;
			z-index: 2;
			width: 100%;
		}
		
		.orders{
			background: #fff;
			position: relative;
			z-index: 2;
			margin: 20rpx;
			border-radius: 20rpx;
			padding: 30rpx;
			
			.title{
				font-weight: bold;
				font-size: 32rpx;
				margin-bottom: 30rpx;
			}
			.uniBtn{
				padding: 0 40rpx;
				font-weight: 400;
				.odlBox{
					text-align: center;
					position: relative;
					
					image{
						width: 50rpx;
						height: 50rpx;
					}
					
					.odlNum{
						position: absolute;
						top: -10rpx;
						right: -5rpx;
						width: 35rpx;
						height: 35rpx;
						font-size: 16rpx;
						background: #AA3128;
						color: #fff;
						border-radius: 50%;
						line-height: 35rpx;
					}
				}
			}
		}
		.boxes{
			background: #fff;
			margin: 20rpx;
			padding: 50rpx 60rpx;
			border-radius: 20rpx;
			.uniFlex{
				text-align: center;
				font-weight: 400;
				.box{
					margin-right: 50rpx;
					image{
						width: 70rpx;
						height: 65rpx;
					}
				}
			}
		}
	}
</style>